<script setup>
import {ref} from 'vue'
import Message from "@/component/Message.vue";
let x = 1
console.info(x)
let text1 = '哈哈哈哈哈哈'
let text = '<span style="color: red">哈哈哈哈哈</span>'
let time = ref(new Date())
let grade = 88
let name = ''
let pid = 'text'
let arr = ref([1,2,3,4])
let students = [
  {name:'小李',sn:'2413',age:'19'},
  {name:'小王',sn:'2412',age:'19'},
  {name:'小张',sn:'2411',age:'19'},
  {name:'小天',sn:'2410',age:'19'},
  {name:'小齐',sn:'2419',age:'19'}
]
/*
window.onload = function (){
  document.getElementById("button").onclick = ()=>
  {
    let text2 = document.getElementsByName("name")[0]
    console.info(text2.value)
  }
}
*/

let inputValue = ref("哈哈哈")
const btnEvent = ()=>{
  console.info(inputValue.value)
//   输出字符串1111 需要加引号   输出数字1111 不用加引号
}
setInterval(()=>{
  time.value = new Date()
  //现在time是个对象，要是给time赋值，应该是给time.value赋值
},1000)
let addValue = ()=>{
  arr.value.push(inputValue.value)
}

</script>

<template>
  <div>
    <!--  变量的用法   <h1>{{变量名字}}</h1>-->
    <!--  表达式：能得到一个确切结果的代码
      text.length>0 结果为真，是表达式
      注意语句和表达式的区别
    -->
    <h1>{{text1.length}}</h1>
    <p>{{time}}</p>
    <!--  指令： 带有v- 前缀的 特殊 属性-->
    <a v-href="dddddddd">跳转</a>
    <p v-text="text"></p>
    <p v-html="text"></p>
    <p v-if="grade>=90">优秀</p>
    <p v-else-if="grade>=80">良好</p>
    <p v-else-if="grade>=70">中等</p>
    <p v-else-if="grade>=60">及格</p>
    <p v-else>不及格</p>
    <!--  判断name是否为空字符串，不为空，打印出结果-->
    <p v-if="name">{{name}}</p>
    <p v-show="grade>90">嘿嘿嘿</p>
    <p id="text">这是text的p标签</p>
    <!--  将变量的值绑定到属性
      因为id = "pid" 此时 "pid"为字符串，不是变量
    -->
    <p v-bind:id="pid">这是text的p标签</p>
    <p :id="pid"></p>
    <!--  v-for 循环数组-->
    <p v-for="(item,index) in arr" v-bind:key="index">{{item}}</p>
    <!--  {{item}} 这个是输出item变量的值     v-bind:key="index"---变量赋予属性-->
    <table id="d1"  border="1" cellspacing="0"  cellpadding="10">
      <!--    border是边框的宽度是1px
      cellspacing：控制单元格之间的间距，当单元格和单元格之间有距离的话，会出现内外边框
      cellpadding:控制元素距离边框的距离，值越大，表格越大，空隙也越多-->
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>班级</td>
        <td>年龄</td>
      </tr>
      <tr v-for="(item,index) in students">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.sn}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
    <input v-model="inputValue" type="text" name="name"> <br>
    输入框的值：{{inputValue}} <br>
    当前时间：{{time}} <br>
    <!--  此时，变量和输入框建立绑定关系，但此时是单向绑定，变量改变，输入框的值不改变-->
    <button @click="addValue">给数组添加一个值</button>
    <button id="button" @click="btnEvent" >按钮</button>
    <!--  <button id="btn" :id="btnEvent"  @change="btnEvent"></button>-->
    <!-- 属性可以是方法，但是方法不能是属性-->

    <!--  // 表示当前路由指向哪里，这里就是谁-->
    <RouterView/>
    <!--  // 相对于 div 所有demo的内容-->
  </div>
  <message/>
    <Message pageValue="demo"/>
</template>

<style scoped>
#d1{
  border:1px solid red;
  text-align: center;
  /*margin: 5px; 这个用在div中*/

}
</style>
